{template 'common/header'}

	<div class="clearfix">
		<h4>关键指标详解</h4>
		<form action="">
			<input type="hidden" name="c" value="platform">
			<input type="hidden" name="a" value="stat">
			<input type="hidden" name="do" value="trend">
			<input type="hidden" name="id" value={$id}>
			{php echo tpl_form_field_daterange('time', array('starttime'=>date('Y-m-d', $starttime),'endtime'=>date('Y-m-d', $endtime)));} <button class="btn btn-block" style="display:inline-block;width:100px"><i class="fa fa-search"></i> 搜索</button>
		</form>
		<div class="stat">
			<form action="" method="get">
			<div class="stat-div">

			</div>
			</form>
		</div>
	</div>
	<div class="table-responsive">
		<table class="table">
			<tr>
				<td>
					<h4 style="width:100%">规则使用趋势图</h4>
					<canvas id="myChart" width="1200" min-width="800" height="300"></canvas>
				</td>
			</tr>
		</table>
	</div>
	
	{loop $keywords $id $row}
		<div class="table-responsive">
			<table class="table">
				<tr>
					<td>
						<h4 class="sub-title">所属关键字使用趋势图&nbsp;&nbsp;&nbsp;<small>(关键字：{$keywordnames[$id]['content']})</small></h4>
						<canvas id="trend_keyword_{$id}" width="1200" min-width="800" height="300"></canvas>
					</td>
				</tr>
			</table>
		</div>
	{/loop}
	<script>
		require(['chart', 'jquery'], function(c, $){
			var label = {php echo json_encode($day)};
			var datasets =  {php echo json_encode($hit)};
			var lineChartData = {
				labels : label,
				datasets : [
					{
						fillColor : "rgba(220,220,220,0.5)",
						strokeColor : "rgba(220,220,220,1)",
						pointColor : "rgba(220,220,220,1)",
						pointStrokeColor : "#fff",
						data : datasets
					}
				]

			}

			var options = {
				scaleOverlay : false,
				scaleOverride : true,
				scaleSteps : 7,
				scaleStepWidth : {$step},
			}
			var myLine = new Chart(document.getElementById("myChart").getContext("2d")).Line(lineChartData, options);
			
			{loop $keywords $id $row}
				var label = {php echo json_encode($row['day'])};
				var datasets = {php echo json_encode($row['hit'])};
				var lineChartData = {
					labels : label,
					datasets : [
						{
							fillColor : "rgba(220,220,220,0.5)",
							strokeColor : "rgba(220,220,220,1)",
							pointColor : "rgba(220,220,220,1)",
							pointStrokeColor : "#fff",
							data : datasets
						}
					]
	
				}
				
				var step = {php echo ceil((max($row['hit']))/7)};
				
				var options = {
					scaleOverlay : false,
					scaleOverride : true,
					scaleSteps : 7,
					scaleStepWidth : step
				}

				var myLine = new Chart(document.getElementById("trend_keyword_{$id}").getContext("2d")).Line(lineChartData, options);
			{/loop}
		});
	</script>
{template 'common/footer'}
